<template>
  <view class="my-report">
    <view class="my-report-wrap cbox">
      <text class="title rbox">上报信息</text>
      <view class="list cbox">
        <item class="item rbox" v-for="(item, idx) in list" :key="idx">
          <text class="tit rbox box_x_start">{{ item.tit }}</text>
          <text class="msg">{{ item.msg }}</text>
        </item>
      </view>
      <text class="tip rbox box_x_center">以下是专家回复</text>

      <text class="title rbox">专家回复</text>
      <view class="list cbox">
        <item class="item rbox" v-for="(item, idx) in list2" :key="idx">
          <text class="tit rbox box_x_start">{{ item.tit }}</text>
          <text class="msg">{{ item.msg }}</text>
        </item>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          tit: '庄园信息：',
          msg: '第三农庄葡萄庄'
        },
        {
          tit: '园区面积：',
          msg: '10平方千米'
        },
        {
          tit: '发生过的灾害：',
          msg: '霜霉病毒'
        },
        {
          tit: '葡萄品种：',
          msg: '红葡萄'
        },
        {
          tit: '用药次数：',
          msg: '2次'
        },
        {
          tit: '手机号码：',
          msg: '17612345678'
        }
      ],
      list2: [
        {
          tit: '症状描述：',
          msg: '可以确诊'
        },
        {
          tit: '病害名称：',
          msg: '霜霉病'
        },
        {
          tit: '处理建议：',
          msg: '霜霉病指的是由真菌中的霜霉菌引起的植物病害。霜霉菌是专性寄生菌，极少数的霜霉菌已可人工培养，如引起谷子白发病的禾生指梗霉'
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.my-report {
  padding: 40rpx 42rpx 0;
  min-height: 100vh;
  background-color: #f7f7f7;
  .my-report-wrap {
    padding: 0 30rpx 90rpx;
    background-color: #fff;
    border-radius: 30rpx;
    .title {
      margin: 30rpx 0;
      font-size: 34rpx;
      line-height: 1;
      color: #5a5a5a;
    }
    .list {
      padding: 30rpx 0 0;
      border-top: 1rpx solid #e9e8e8;
      .item {
        &:not(:first-child) {
          margin-top: 30rpx;
        }
        .tit {
          min-width: 7em;
          font-size: 26rpx;
          line-height: 1;
          color: #b5b5b5;
        }
        .msg {
          margin-left: 16rpx;
          font-size: 26rpx;
          line-height: 1.4;
          color: #5a5a5a;
        }
      }
    }
    .tip {
      margin-top: 60rpx;
      font-size: 24rpx;
      line-height: 1;
      color: #acacac;
    }
  }
}
</style>